/*
 * @Author: TLL
 * @Date: 2021-07-20 13:15:51
 * @version: v1.1
 * @Descripttion:
 * @LastEditors: TLL
 * @LastEditTime: 2021-07-22 14:04:18
 * @Auditor: TLL
 */
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Dropdown, Tooltip } from 'antd';
import {
  SettingOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined,
  VerticalAlignMiddleOutlined
} from '@ant-design/icons';
import DropDragColumns from './DropDragColumns';
import style from './style.module.scss';
import i18n from '@library/app/i18n';
import { Admin, handleUserId } from './Api';

const t = (k: string) => i18n.t(k);

interface Props {
  columns: any[];
  setColumns: any;
  columnsCopy: any[]; // 需要一份拷贝
  columnsSaveFun: any;
  columnsRecoverFun: any;
  columnsShareFun: any;
  children?: any;
}

const _DropdownColumnsSet = ({
  columns,
  setColumns,
  columnsCopy,
  columnsSaveFun,
  columnsRecoverFun,
  columnsShareFun,
  children
}: Props) => {
  const [visible, setVisible] = useState(false);

  const [columnsLeft, setColumnsLeft] = useState<any>([]);
  const [columnsCenter, setColumnsCenter] = useState<any>([]);
  const [columnsRight, setColumnsRight] = useState<any>([]);

  useEffect(() => {
    if (columns?.length) {
      setColumnsLeft(columns?.filter((ele: any) => ele.isFixedLeft));
      setColumnsCenter(columns?.filter((ele: any) => !ele.isFixedLeft && !ele.isFixedRight));
      setColumnsRight(columns?.filter((ele: any) => ele.isFixedRight));
    }
  }, [columns]);

  const resetColumnsFun = useCallback(() => {
    setColumns([...columnsCopy.map((ele: any) => ({ ...ele }))]);
  }, [setColumns, columnsCopy]);

  const handleResult = useCallback(
    (result?: any) => {
      if (result) {
        const left = columnsLeft?.map((ele: any) => ele.dataIndex);
        const center = columnsCenter?.map((ele: any) => ele.dataIndex);
        const right = columnsRight?.map((ele: any) => ele.dataIndex);
        if (left.includes(result?.[0]?.dataIndex)) setColumns([...result, ...columnsCenter, ...columnsRight]);
        else if (center.includes(result?.[0]?.dataIndex)) setColumns([...columnsLeft, ...result, ...columnsRight]);
        else if (right.includes(result?.[0]?.dataIndex)) setColumns([...columnsLeft, ...columnsCenter, ...result]);
        else setColumns([...result]);
      } else setColumns([...columns]);
    },
    [columns, setColumns, columnsLeft, columnsCenter, columnsRight]
  );

  const confirmColumnsFun = useCallback(() => {
    setVisible(false);
    columnsSaveFun?.();
  }, [columnsSaveFun]);

  const fixedLeftFun = useCallback(
    (item: any, index: number) => {
      item.isFixedRight = false;
      item.isFixedLeft = true;
      const list = [...columns].map((ele) => ({ ...ele }));
      const left = list.filter((ele) => ele.isFixedLeft);
      const center = list.filter((ele) => !ele.isFixedLeft && !ele.isFixedRight);
      const right = list.filter((ele) => ele.isFixedRight);
      setColumns([...left, ...center, ...right]);
    },
    [columns, setColumns]
  );

  const fixedRightFun = useCallback(
    (item: any, index: number) => {
      item.isFixedLeft = false;
      item.isFixedRight = true;
      const list = [...columns].map((ele) => ({ ...ele }));
      const left = list.filter((ele) => ele.isFixedLeft);
      const center = list.filter((ele) => !ele.isFixedLeft && !ele.isFixedRight);
      const right = list.filter((ele) => ele.isFixedRight);
      setColumns([...left, ...center, ...right]);
    },
    [columns, setColumns]
  );

  const fixedCenterFun = useCallback(
    (item: any, index: number) => {
      item.isFixedLeft = false;
      item.isFixedRight = false;
      const list = [...columns].map((ele) => ({ ...ele }));
      const left = list.filter((ele) => ele.isFixedLeft);
      const center = list.filter((ele) => !ele.isFixedLeft && !ele.isFixedRight);
      const right = list.filter((ele) => ele.isFixedRight);
      setColumns([...left, ...center, ...right]);
    },
    [columns, setColumns]
  );

  const handleChildren = (item: any, index: number) => (
    <div className={style.hoverFixed}>
      {item.isFixedLeft ? (
        <Tooltip title={t('notFixed')}>
          <VerticalAlignMiddleOutlined onClick={() => fixedCenterFun(item, index)} className={style.fixedIcon} />
        </Tooltip>
      ) : (
        <Tooltip title={t('fixedLeft')}>
          <VerticalAlignTopOutlined onClick={() => fixedLeftFun(item, index)} className={style.fixedIcon} />
        </Tooltip>
      )}
      {item.isFixedRight ? (
        <Tooltip title={t('notFixed')}>
          <VerticalAlignMiddleOutlined onClick={() => fixedCenterFun(item, index)} className={style.fixedIcon} />
        </Tooltip>
      ) : (
        <Tooltip title={t('fixedRight')}>
          <VerticalAlignBottomOutlined onClick={() => fixedRightFun(item, index)} className={style.fixedIcon} />
        </Tooltip>
      )}
    </div>
  );

  const recoverColumnsFun = useCallback(async () => {
    setVisible(false);
    columnsRecoverFun();
  }, [columnsRecoverFun]);

  const onShareConfirm = useCallback(() => {
    setVisible(false);
    columnsShareFun();
  }, [columnsShareFun]);

  return (
    <Dropdown
      placement='bottomRight'
      visible={visible}
      overlay={
        <div className={style.columnsContainer}>
          <div className={style.columnTitle}>
            <span>{t('columnPresentation')}</span>
            <div className="operateBtn">
              <Button type="link" className={style.linkBtnStyle} onClick={recoverColumnsFun}>
                {t('reset')}
              </Button>
              <Button type="link" className={style.linkBtnStyle} onClick={resetColumnsFun}>
                {t('cancel')}
              </Button>
              {handleUserId() === Admin ? (
                <Button type="link" className={style.linkBtnStyle} onClick={onShareConfirm}>
                  {t('shareSure')}
                </Button>
              ) : null}
              <Button type="link" className={style.linkBtnStyle} onClick={confirmColumnsFun}>
                {t('confirm')}
              </Button>
            </div>
          </div>
          <div className={style.columnContent}>
            {columnsLeft?.length ? (
              <div className={style.fixLeftContainer}>
                <div className={style.fixedTitle}>{t('fixedLeft')}</div>
                <DropDragColumns
                  columns={columns?.filter((ele: any) => ele.isFixedLeft)}
                  handleResult={handleResult}
                  handleChildren={handleChildren}
                />
              </div>
            ) : null}
            {columnsLeft?.length || columnsRight?.length ? (
              <div className={style.fixedTitle}>{t('notFixed')}</div>
            ) : null}
            <DropDragColumns columns={columnsCenter} handleResult={handleResult} handleChildren={handleChildren} />
            {columnsRight?.length ? (
              <div className={style.fixRightContainer}>
                <div className={style.fixedTitle}>{t('fixedRight')}</div>
                <DropDragColumns
                  columns={columns?.filter((ele: any) => ele.isFixedRight)}
                  handleResult={handleResult}
                  handleChildren={handleChildren}
                />
              </div>
            ) : null}
          </div>
          {children}
        </div>
      }
      trigger={['click']}
    >
      <SettingOutlined className={style.iconStyle} onClick={() => setVisible((bool) => !bool)} />
    </Dropdown>
  );
};

export default _DropdownColumnsSet;
